
<template>
  <div id="app">
    <el-container>
      <el-header class="app-header">
        <div class="header-content">
          <h1>需求管理平台</h1>
          <el-button type="primary" @click="showCreateProjectDialog = true">
            <el-icon><Plus /></el-icon>
            新建项目
          </el-button>
        </div>
      </el-header>
      
      <el-main class="app-main">
        <ProjectList 
          :projects="projects" 
          @refresh="loadProjects"
          @project-selected="handleProjectSelected"
        />
      </el-main>
    </el-container>

    <!-- 创建项目对话框 -->
    <el-dialog
      v-model="showCreateProjectDialog"
      title="创建新项目"
      width="500px"
    >
      <el-form :model="newProject" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="newProject.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input
            v-model="newProject.description"
            type="textarea"
            :rows="3"
            placeholder="请输入项目描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateProjectDialog = false">取消</el-button>
        <el-button type="primary" @click="createProject">确定</el-button>
      </template>
    </el-dialog>

    <!-- 项目详情对话框 -->
    <el-dialog
      v-model="showProjectDetailDialog"
      :title="currentProject?.name"
      width="80%"
      top="5vh"
    >
      <ProjectDetail
        v-if="currentProject"
        :project="currentProject"
        @close="showProjectDetailDialog = false"
        @refresh="loadProjects"
      />
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import ProjectList from './components/ProjectList.vue'
import ProjectDetail from './components/ProjectDetail.vue'

export default {
  name: 'App',
  components: {
    ProjectList,
    ProjectDetail
  },
  setup() {
    const projects = ref([])
    const showCreateProjectDialog = ref(false)
    const showProjectDetailDialog = ref(false)
    const currentProject = ref(null)
    
    const newProject = reactive({
      name: '',
      description: ''
    })

    // 加载项目列表
    const loadProjects = async () => {
      try {
        const response = await axios.get('/api/projects')
        projects.value = response.data
      } catch (error) {
        ElMessage.error('加载项目列表失败')
        console.error(error)
      }
    }

    // 创建项目
    const createProject = async () => {
      if (!newProject.name.trim()) {
        ElMessage.warning('请输入项目名称')
        return
      }

      try {
        await axios.post('/api/projects', newProject)
        ElMessage.success('项目创建成功')
        showCreateProjectDialog.value = false
        newProject.name = ''
        newProject.description = ''
        loadProjects()
      } catch (error) {
        ElMessage.error('创建项目失败')
        console.error(error)
      }
    }

    // 处理项目选择
    const handleProjectSelected = (project) => {
      currentProject.value = project
      showProjectDetailDialog.value = true
    }

    onMounted(() => {
      loadProjects()
    })

    return {
      projects,
      showCreateProjectDialog,
      showProjectDetailDialog,
      currentProject,
      newProject,
      loadProjects,
      createProject,
      handleProjectSelected
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.app-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  color: #303133;
  font-size: 24px;
  font-weight: 500;
}

.app-main {
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
  padding: 20px;
}
</style>
